<script setup>
import { ref, watch } from "vue";
import { sourceLangType } from "./menu";
import { Message } from "@arco-design/web-vue";
import { getTranslateData } from "./api";
import { onMounted } from "vue";

function debounce(func, wait) {
  let timeout;
  return function () {
    window.clearTimeout(timeout);
    timeout = window.setTimeout(func, wait);
    console.log("执行了");
  };
}
const draggable = ref(true);
const originText = ref("");
const targetText = ref("");
const sourceOptionData = ref([]);
for (let key in sourceLangType) {
  sourceOptionData.value.push({
    label: sourceLangType[key],
    value: key,
  });
}
const Source = ref("en");
const Target = ref("zh");
const input = ref();

const handleSendRequest = async () => {
  const SourceText = originText.value.trim();
  if (!SourceText) {
    targetText.value = "";
    Message.info({
      content: "请输入需要翻译的文本",
    });
    return;
  }
  const data = {
    SourceText: originText.value,
    Source: Source.value,
    Target: Target.value,
    ProjectId: 0,
  };
  try {
    const res = await getTranslateData(data);
    targetText.value = res.TargetText;
    console.log(res);
  } catch (e) {
    console.log(e);
  }
};

const handleSwap = () => {
  const temp = originText.value;
  originText.value = targetText.value;
  targetText.value = temp;
  const temp2 = Source.value;
  Source.value = Target.value;
  Target.value = temp2;
};

watch(originText, debounce(handleSendRequest, 1000));

watch([Source, Target], () => {
  handleSendRequest();
});
// 移除窗口，向主进程发一个请求
const removeWindow = () => {
  window.electron.removeWindow();
};

onMounted(() => {
  input.value.focus();
});
</script>

<template>
  <div
    class="container"
    :class="{
      draggable: draggable,
    }">
    <div class="translateBox">
      <div class="header">
        <div class="title">小翻译</div>
        <div class="buttons">
          <a-button
            v-if="draggable"
            @click="draggable = false"
            shape="circle"
            style="
              width: 1.5em;
              color: white;
              background-color: transparent;
              -webkit-app-region: no-drag;
            "
            ><icon-unlock size="1.5em"
          /></a-button>
          <a-button
            v-else
            @click="draggable = true"
            shape="circle"
            style="
              width: 1.5em;
              color: white;
              background-color: transparent;
              -webkit-app-region: no-drag;
            "
            ><icon-lock size="1.5em"
          /></a-button>
          <a-button
            @click="removeWindow"
            shape="circle"
            style="
              color: white;
              background-color: transparent;
              -webkit-app-region: no-drag;
            "
            ><icon-close size="1.5em"
          /></a-button>
        </div>
      </div>

      <div class="translateContainer">
        <IconSwap @click="handleSwap" />
        <div class="leftBox">
          <div class="select">
            <a-radio-group
              v-model="Source"
              type="button"
              size="mini"
              :options="sourceOptionData">
            </a-radio-group>
          </div>
          <a-textarea
            ref="input"
            v-model="originText"
            placeholder="输入文本"
            :auto-size="{
              minRows: 1,
              maxRows: 5,
            }"
            allow-clear />
        </div>
        <div class="rightBox">
          <div class="select">
            <a-radio-group
              v-model="Target"
              type="button"
              size="mini"
              :options="sourceOptionData"></a-radio-group>
          </div>
          <div
            v-if="targetText"
            style="-webkit-app-region: no-drag; user-select: text">
            {{ targetText }}
          </div>
          <div v-else style="color: #666">翻译</div>
        </div>
      </div>
      <!-- <a-button @click="handleSendRequest">翻译</a-button> -->
    </div>
  </div>
</template>

<style scoped>
/* 可拖拽 */
.draggable {
  -webkit-app-region: drag;
}
.container,
.translateBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.translateBox {
  flex-direction: column;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 16px;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
}

.translateContainer {
  flex: 1;
  width: 100%;
  display: flex;
  /* border: 1px solid #e5e6eb; */
  border-radius: 6px;
  position: relative;
  /* overflow: hidden; */
  background-color: rgba(23, 31, 29, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* 兼容旧版本的 Safari */
  color: white;
}

:deep(.arco-icon-swap) {
  border: 1px solid #aaa;
  z-index: 10;
  font-size: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20%;
  /* background-color: #fff; */
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.select {
  width: 100%;
  border-radius: 20px;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent !important;
  -webkit-app-region: no-drag;
  color: #fff;
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}

.arco-radio-group-button {
  margin: auto;
}

.leftBox,
.rightBox {
  flex: 1;
  position: relative;
  padding-top: 50px;
  /* background-color: #f7f7f7; */
}

.leftBox {
  padding-right: 20px;
}

.arco-textarea-wrapper {
  background-color: transparent;
  color: #fff;
}
:deep(.arco-textarea) {
  font-size: 26px;
  -webkit-app-region: no-drag;
  background-color: transparent;
  color: #fff;
}

.rightBox {
  padding-left: 20px;
  font-size: 26px;
  /* background-color: #fff; */
}
</style>
